<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>有你所选，选你所爱</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/01css.css">
    <link rel="stylesheet" href="css/02css.css">
    <link rel="stylesheet" href="css/03cs.css">
    <link rel="stylesheet" href="css/04cs.css">

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #outer {
            margin: 50px auto;
            width: 520px;
            height: 333px;
            background-color: red;
            padding: 10px 0;
            overflow: hidden;
            position: relative;
        }

        #list-img {
            list-style: none;
            display: flex;
            position: absolute;
            left: 0px;
        }

        #list-img li {
            display: block;
            float: left;
            margin: 0 10px;
        }

        #nav {
            position: absolute;
            display: flex;
            bottom: 15px;
        }

        #nav a {
            width: 20px;
            height: 20px;
            float: left;
            background-color: royalblue;
            margin: 0 10px;
            opacity: 0.7;

        }

        #nav a:hover {
            background-color: black;
            opacity: 0.7;
        }

        .LNR{
            margin: 10px 0px;
        }

    </style>

</head>
<body>
<div id="app">
    <header>
        <!--搜索格 包含超链接图标  搜索栏  购物车跳转-->
        <div class="w middle">
            <!--登录注册-->
            <div class="LNR" v-if="isLogin">
                <a href="login.html">登录/</a>
                <a href="register.html">注册</a>
            </div>
            <div class="LNR" v-if="!isLogin">
                欢迎： <a @click="personal(a.loginUser.username)">{{a.loginUser.username}}</a>
                <a href="javascript:;" @click="logout()"><span class="iconfont icon-tuichu"></span>退出</a>
            </div>
            <div class="logo">
                <h1>
                    <a href="#">
                        <img src="logo.jpg" alt="">
                    </a>
                </h1>
            </div>
            <!--搜索-->
            <div class="form">
                <input type="text" class="form-control" placeholder="车厘子" v-model="wd">
                    <span class="input-group-btn">
			            <button @click="search()">搜索</button>
		             </span>
                </input>
            </div>
            <!--购物车-->
            <div class="shopCar">
                <div><!--购物车大DIV-->
                    <div><!--购物车显示的div-->
                        <svg t="1638961718087" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg"
                             p-id="2342" width="18" height="18">
                            <path d="M246.4 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="2343"
                                  color="#232321"></path>
                            <path d="M716.8 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="2344"></path>
                            <path d="M905.6 764.8l-537.6 0c-28.8 0-57.6-25.6-64-54.4l-96-566.4c-9.6-54.4-60.8-96-115.2-96l-22.4 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l22.4 0c28.8 0 57.6 25.6 64 54.4l96 566.4c9.6 54.4 60.8 96 115.2 96l537.6 0c12.8 0 25.6-12.8 25.6-25.6C931.2 777.6 921.6 764.8 905.6 764.8z"
                                  p-id="2345"></path>
                            <path d="M880 179.2l-572.8 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l572.8 0c25.6 0 38.4 16 32 41.6l-70.4 281.6c-6.4 32-41.6 57.6-73.6 60.8l-396.8 28.8c-12.8 0-25.6 12.8-22.4 28.8 0 12.8 12.8 25.6 28.8 22.4l396.8-28.8c54.4-3.2 105.6-48 118.4-99.2l70.4-281.6C976 230.4 937.6 179.2 880 179.2z"
                                  p-id="2346"></path>
                        </svg>
                        <a @click="setCarhtml(a.loginUser.username)">我的购物车</a>
                        <i class="ci-count" id="shopping-amount"><span>{{a.carCount}}</span></i>
                    </div>
                </div>
                <div class="shopCar_cover"></div>
                <div class="shopCar_cover2"></div>
                <div class="shopCar_list">
                    购物车中还没有商品，赶紧选购吧!^.^!
                </div>
            </div>




            <!--热门文字-->
            <div class="hotwords">
                <a href="category.html">火龙果</a>&nbsp;&nbsp;
                <a href="category.html">柑橘</a>
                <a href="category.html">牛油果</a>&nbsp;&nbsp;
                <a href="category.html">猕猴桃</a>&nbsp;&nbsp;
                <a href="category.html">泰国山竹</a>&nbsp;&nbsp;
            </div>
        </div>

    </header>

    <div class="fresh">
        <!--滚动页-->
        <div class=fresh_fs>
            <!--商品分类-->
            <div class="fresh_fs_menu">
                <div class="fresh_fs_menu_inner grid_c1">
                    <div class="fresh_fs_menu_list">    <!--打锚跳转下面内容-->
                        <el-menu style="margin: 0 auto;height: 40px"
                                 :default-active="activeIndex"
                                 class="el-menu-demo"
                                 mode="horizontal"
                                 @select="handleSelect"
                                 background-color="#ffffff"
                                 text-color="#666666"
                                 active-text-color="#000000">
                            <el-menu-item v-for="c in menuArr" :key="c.id" style="height: 42px;line-height: 42px">
                                {{c.title}}
                            </el-menu-item>
                        </el-menu>
                    </div>
                    <a class="fresh_fs_menu_news" href="javascript:void(0);"><i></i>品质保障</a>
                </div>
            </div>
            <!--分类主体-->
            <div class="fresh_fs_main">
                <div class="fresh_fs_main_inner grid_c1 clearfix">
                    <!--分类列表-->
                    <div class="fresh_fs_nav">
                        <div class="fresh_fs_nav_title">果真好生鲜商品分类</div>
                        <div class="fresh_fs_nav_tab">
                            <div class="tab_head">
                                <div class="tab_head_item">
                                    <!--左侧分类列表-->
                                    <div class="tab_head_item_inner item1">
                                        <a :href="'category.html?cid='+c.id" v-for="c in categoryArr" class="item_title"
                                           style="margin: 7px 0 60px 0">{{c.name}}</a>
                                    </div>
                                    <!--中间隐藏分类 覆盖轮播图-->

                                </div>

                            </div>
                        </div>
                    </div><!--分类结束-->
                    <!--轮播图-->
                    <div class="fresh_fs_carousel">
                        <div id="myCarousel" class="carousel slide">
                            <!--&lt;!&ndash; 轮播（Carousel）指标 &ndash;&gt;
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>-->
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner">
                                <template>
                                    <el-carousel  indicator-position="outside" height="400px">
                                        <el-carousel-item v-for="item in bannerArr2" :key="item">
                                            <a href="/category.html"><img :src="item" alt="" class="img-item" height="100%" width="100%"/></a>
                                        </el-carousel-item>
                                    </el-carousel>
                                </template>
                                <!--<div class="item active">
                                    <img src="/img/95e04c6d4ab836a5.jpg" alt="First slide">
                                    <div class="carousel-caption">标题 1</div>
                                </div>
                                <div class="item">
                                    <img src="/img/83e1b5011daee51e.png" alt="Second slide">
                                    <div class="carousel-caption">标题 2</div>
                                </div>
                                <div class="item">
                                    <img src="/img/233f2a9948487c51.jpg" alt="Third slide">
                                    <div class="carousel-caption">标题 3</div>
                                </div>-->
                            </div>
                            <!-- 轮播（Carousel）导航 -->
                            <!--<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>-->
                        </div>
                    </div><!--轮播图结束-->
                    <!--右侧精选头条-->

                    <div class="fresh_fs_side">
                        <div class="fresh_fs_toutiao">
                            <div class="fresh_fs_toutiao_title">
                                <i class="fresh_fs_toutiao_title_l"></i>
                                <span class="fresh_fs_toutiao_title_text">
								<em>瓜果</em>头条
							    </span>
                                <i class="fresh_fs_toutiao_title_r"></i>
                            </div>
                            <div class="fresh_fs_toutiao_list" >
                                <a @click="getInform()" v-for="(c,index) in informArr" v-if="index<3" class="fresh_fs_toutiao_item" >
                                    {{c.infoContent}}</a>

                            </div>
                        </div>
                        <a href="" class="fresh_fs_act">
                            <img class="fresh_fs_act_img" src="img/a1d6642d598c0b10.png" alt="">
                        </a>
                    </div>
                    <div class="fresh_fs_bgl"></div>
                    <div class="fresh_fs_shadow"></div>
                </div>
            </div>
            <!--背景图片-->
            <div class="fresh_fs_bgad">
                <a href="javascript:;" class="fresh_fs_bgad_lk"></a>
            </div>
        </div>

        <!--服务保障-->
        <div class="fresh_service grid_c1">
            <ul class="mod_service grid_c1 clearfix">
                <li class="mod_service_item item1">
                    <div class="mod_service_item_inner">
                        <i class="mod_service_icon"></i>
                        <p class="mod_service_title">食品安全</p>
                        <p class="mod_service_desc">精选生鲜 严格质检</p>
                    </div>
                </li>
                <li class="mod_service_item item2">
                    <div class="mod_service_item_inner">
                        <i class="mod_service_icon"></i>
                        <p class="mod_service_title">全程冷链</p>
                        <p class="mod_service_desc">自营物流 安全可控</p>
                    </div>
                </li>
                <li class="mod_service_item item3">
                    <div class="mod_service_item_inner">
                        <i class="mod_service_icon"></i>
                        <p class="mod_service_title">鲜活天然</p>
                        <p class="mod_service_desc">绿色生态 京东精选</p>
                    </div>
                </li>
                <li class="mod_service_item item4">
                    <div class="mod_service_item_inner">
                        <i class="mod_service_icon"></i>
                        <p class="mod_service_title">产地直采</p>
                        <p class="mod_service_desc">限定产源 质量保证</p>
                    </div>
                </li>
                <li class="mod_service_item item5">
                    <div class="mod_service_item_inner">
                        <i class="mod_service_icon"></i>
                        <p class="mod_service_title">无忧售后</p>
                        <p class="mod_service_desc">优鲜赔 售后通道</p>
                    </div>
                </li>
            </ul>
        </div>
        <section class="linkage"></section>

        <!--身临食感-->
        <div></div>

        <!--XX生鲜一号框-->
        <div class="bigdiv grid_c1"><!--内容部分  产品  大框-->
            <div class="fresh_mod_head">
                <div class="fresh_mod_head_inner">
                    <a id="m2"></a>
                    <h3 class="fresh_mod_head_title">
                        果
                        <i>/</i>
                        真
                        <i>/</i>
                        好
                    </h3>
                    <p class="fresh_mod_head_subtitle">FRUIT SHOP</p>
                </div>
            </div><!--产品展示部分标题结束-->
            <div class="fresh_category_body">
                <div class="fresh_category_acts"><!--产品展示部分 上半部分-->
                    <div class="fresh_category_act1" style="background: url(img/5982d8c6N279ff1cf.png) 0 0 no-repeat">
                        <!--上半部分左侧-->
                        <h4 class="fresh_category_title">新鲜水果</h4>
                        <div class="tttt1">
                            <p class="fresh_category_subtitle">应时而采，新鲜特供</p>
                            <div class="fresh_category_subtitle_ud"></div>
                        </div>
                        <div>
                            <a href="/productInfo.html?id=11" class="fresh_category_keys_item">猕猴桃</a>
                            <a href="/productInfo.html?id=12" class="fresh_category_keys_item">甜橙</a>
                            <a href="/productInfo.html?id=18" class="fresh_category_keys_item">米蕉</a>
                            <a href="/productInfo.html?id=14" class="fresh_category_keys_item">大红枣</a>
                            <a href="/productInfo.html?id=15" class="fresh_category_keys_item">黑美人</a>
                            <a href="/productInfo.html?id=16" class="fresh_category_keys_item">贵妃芒</a>
                        </div>
                        <a href="/category.html" class="fresh_category_more">更多水果</a>
                    </div>
                    <div class="fresh_category_act2"><!--上半部分中间-->
                        <div>
                            <a href="/category.html">
                                <img src="img/233f2a9948487c51.jpg" alt="">
                            </a>
                        </div>
                    </div>

                    <a href="/productInfo.html?id=36" class="fresh_category_act3"><!--上半部分右侧-->
                        <img src="img/7a76ef143c5c7466.png" alt="">
                    </a>

                </div>
                <div class="goods"><!--产品展示部分 下半部分-->
                    <div class="goods_item">
                        <a href="productInfo.html?id=32" class="goods_item_link">
                            <img src="img/5a6aa298N0dd3473a.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">越南进口白心火龙果4个装 标准果 单果400-550g</p>
                        </a>
                        <p class="goods_item_price">¥39.90</p>
                    </div>
                    <div class="goods_item">
                        <a href="productInfo.html?id=33" class="goods_item_link">
                            <img src="img/5a6e7133N2f10bd9b.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">广西沃柑 柑橘1.5kg 新鲜水果</p>
                        </a>
                        <p class="goods_item_price">¥39.90</p>
                    </div>
                    <div class="goods_item">
                        <a href="productInfo.html?id=34" class="goods_item_link">
                            <img src="img/59f05afdN3c13f6ed.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">进口 牛油果 6个装 单果重约130-180g 新鲜水果</p>
                        </a>
                        <p class="goods_item_price">¥39.90</p>
                    </div>
                    <div class="goods_item">
                        <a href="productInfo.html?id=11" class="goods_item_link">
                            <img src="img/5a65595fNa8a140db.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">爱奇果/齐峰 徐香猕猴桃 25个 单果约80-100g </p>
                        </a>
                        <p class="goods_item_price">¥79.90</p>
                    </div>
                    <div class="goods_item">
                        <a href="productInfo.html?id=35" class="goods_item_link">
                            <img src="img/5a6595afN4cbebc2e.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">泰国进口山竹5A级 500g 新鲜水果</p>
                        </a>
                        <p class="goods_item_price">¥199.90</p>
                    </div>
                    <div class="goods_item">
                        <a href="productInfo.html?id=32" class="goods_item_link">
                            <img src="img/57ab290aN34f76b37.jpg!q80.webp" class="goods_item_img">
                            <p class="goods_item_name">越南进口红心火龙果 3个装 大果 单果约450g</p>
                        </a>
                        <p class="goods_item_price">¥59.90</p>
                    </div>
                </div>
            </div>
            <div class="fresh_category_bgl"></div>
        </div>

        <div style="margin-top: 75px;height: 573px;background: #09b348;margin: 0 auto;">
            <div style="text-align: center; padding-top: 40px">
                <h2>"水果采摘基地"</h2>
                <span style="display: block;color: #fff;background: url(http://www.lbssgsc.com/template/default/assets/images/anli.png)no-repeat center;
                        font-size: 18px;">全国果品基地30多家
        </span>
            </div>
            <div style="width: 1200px;margin: 0 auto;">
                <el-carousel height="300px" class="block" type="card">
                    <el-carousel-item v-for="b in bannerArr">
                        <img :src="b" alt="" class="img-item"/>
                    </el-carousel-item>
                </el-carousel>
            </div>

        </div>


    </div>
    <footer>
        <div id="mod_footer">
            <div id="modd1">

                <div class="m1">
                    <img src="img/绿色对号.png" alt="图片无法加载" id="img1">
                    <div class="m21">食品安全</div>
                    <div class="m22">精选生鲜严格质检</div>
                </div>
                <div class="m1">
                    <img src="img/车厢霜花.png" alt="图片无法加载" id="img2">
                    <div class="m21">全程冷链</div>
                    <div class="m22">自营物流安全可控</div>
                </div>
                <div class="m1">
                    <img src="img/绿色叶子.png" alt="图片无法加载" id="img3">
                    <div class="m21">鲜活天然</div>
                    <div class="m22">绿色生态京东精选</div>
                </div>
                <div class="m1">
                    <img src="img/盒子地址.png" alt="图片无法加载" id="img4">
                    <div class="m21">产地直采</div>
                    <div class="m22">限定禅院质量保证</div>
                </div>
                <div class="m1">
                    <img src="img/2021-12-15_204942.png" alt="图片无法加载" id="img5">
                    <div class="m21">无忧售后</div>
                    <div class="m22">优鲜赔售后通道</div>
                </div>
            </div>
            <hr id="hr1">
            <div id="modd2">
                <img src="img/二维码165751左正好.png" alt="图片无法加载" id="g01">
                <img src="img/二维码191118.png" alt="图片无法加载" id="g02">
                <div id="ts1">


                    <div class="vv1">
                        <div class="v01">购物指南</div>
                        <br>
                        <div class="v02">购物流程<br>支付方式<br>售后规则</div>
                    </div>
                    <div class="vv1">
                        <div class="v01">配送方式</div>
                        <br>
                        <div class="v02">配送运费<br>配送范围<br>配送时间</div>
                    </div>
                    <div class="vv1">
                        <div class="v01">商家服务</div>
                        <br>
                        <div class="v02">平台规则<br>商家入驻<br>联系我们</div>
                    </div>
                    <div class="vv1">
                        <div class="v01">联系客服</div>
                        <br>
                        <div class="v02">在线客服电话<br>客服电话&nbsp;400-606-3311<br>服务时间&nbsp;09:00-24:00<br>反馈邮箱&nbsp;freshkui@id.com
                        </div>
                    </div>
                </div>
            </div>
            <div id="modd3">Copyright&nbsp;@&nbsp;2014-2021&nbsp;JD&nbsp;版权所有</div>
        </div>
        <!--底页-->
    </footer>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let a = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr: ["./img/img.png", "./img/img_1.png", "./img/img_2.png",
                    "./img/img_3.png", "./img/img_4.png", "./img/img_5.png"
                ],
                bannerArr2: ["./img/水果底栏.png","./img/水果底栏1.jpg","./img/95e04c6d4ab836a5.jpg"],
                carCount:"",
                menuArr: [],
                activeIndex: "",
                categoryArr: [],
                loginUser: {
                    username: "",
                    id: "",
                },
                isLogin: true,
                informArr:[],
                wd:'',
            }
        },
        methods: {
            search(){
                //跳转到结果页面把搜索内容传递过去
                location.href="/result.html?wd="+a.wd;
            },

            // 点击按钮，实现退出功能
            logout() {
                // 提示用户是否确认退出

                //do something
                // 1. 清空本地存储中的 token
                localStorage.removeItem("jwt");
                // 2. 重新跳转到登录页面
                location.href = '/login.html'

                // 关闭 confirm 询问框

            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                //跳转到结果页面 把分类id传递过去
                location.href = "/category.html?id=" + key;
            },
            personal(username) {
                console.log(username);
                location.href = "/personal.html?username=" + username;
            },
            setCarhtml(username) {
                console.log(username);
                location.href = "/car.html?username=" + username;
            }
        },
        mounted:
            function () {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/car/getCount").then(function (res) {
                    if (res.data.state == 20000) {
                        a.carCount = res.data.data;
                    }
                })
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/menus").then(function (res) {
                    if (res.data.state == 20000) {
                        a.menuArr = res.data.data;
                    }
                })
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/user/getLoginMessage").then(function (res) {
                    if (res.data.state == 20000) {
                        a.isLogin = false;
                        a.loginUser = res.data.data;
                    } else if (a.loginUser.username == "") {
                        a.isLogin = true;
                    }
                })
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/itemCategory/selectByParentId").then(function (res) {
                    if (res.data.state == 20000) {
                        a.categoryArr = res.data.data;
                    }
                })

                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/inform").then(function (res) {
                    if (res.data.state == 20000) {
                        a.informArr = res.data.data;
                        console.log(a.informArr)
                    }
                })

            },
    })

</script>

</body>
</html>